<!-- 参考：https://github.com/1615450788/vue-cron -->
<template>
  <div id="changeContab">
    <!-- <el-button class="language" type="text" @click="i18n=(i18n==='en'?'cn':'en')">{{i18n}}</el-button> -->
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> {{ text.Seconds.name }}</span>
        </template>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="second.cronEvery" label="1">{{ text.Seconds.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="second.cronEvery" label="2">{{ text.Seconds.interval[0] }}
              <el-input-number size="small" v-model="second.incrementIncrement" :min="1" :max="60" />
              {{ text.Seconds.interval[1]||'' }}
              <el-input-number size="small" v-model="second.incrementStart" :min="0" :max="59" />
              {{ text.Seconds.interval[2]||'' }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="second.cronEvery" label="3">{{ text.Seconds.specific }}
              <el-select size="small" multiple v-model="second.specificSpecific">
                <el-option v-for="(val,$index) in 60" :key="$index" :value="val-1">{{ val-1 }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="second.cronEvery" label="4">{{ text.Seconds.cycle[0] }}
              <el-input-number size="small" v-model="second.rangeStart" :min="1" :max="60" />
              {{ text.Seconds.cycle[1]||'' }}
              <el-input-number size="small" v-model="second.rangeEnd" :min="0" :max="59" />
              {{ text.Seconds.cycle[2]||'' }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> {{ text.Minutes.name }}</span>
        </template>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="minute.cronEvery" label="1">{{ text.Minutes.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="minute.cronEvery" label="2">{{ text.Minutes.interval[0] }}
              <el-input-number size="small" v-model="minute.incrementIncrement" :min="1" :max="60" />
              {{ text.Minutes.interval[1] }}
              <el-input-number size="small" v-model="minute.incrementStart" :min="0" :max="59" />
              {{ text.Minutes.interval[2]||'' }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="minute.cronEvery" label="3">{{ text.Minutes.specific }}
              <el-select size="small" multiple v-model="minute.specificSpecific">
                <el-option v-for="(val,$index) in 60" :key="$index" :value="val-1">{{ val-1 }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="minute.cronEvery" label="4">{{ text.Minutes.cycle[0] }}
              <el-input-number size="small" v-model="minute.rangeStart" :min="1" :max="60" />
              {{ text.Minutes.cycle[1] }}
              <el-input-number size="small" v-model="minute.rangeEnd" :min="0" :max="59" />
              {{ text.Minutes.cycle[2] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> {{ text.Hours.name }}</span>
        </template>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="hour.cronEvery" label="1">{{ text.Hours.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="hour.cronEvery" label="2">{{ text.Hours.interval[0] }}
              <el-input-number size="small" v-model="hour.incrementIncrement" :min="0" :max="23" />
              {{ text.Hours.interval[1] }}
              <el-input-number size="small" v-model="hour.incrementStart" :min="0" :max="23" />
              {{ text.Hours.interval[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="hour.cronEvery" label="3">{{ text.Hours.specific }}
              <el-select size="small" multiple v-model="hour.specificSpecific">
                <el-option v-for="(val,$index) in 24" :key="$index" :value="val-1">{{ val-1 }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="hour.cronEvery" label="4">{{ text.Hours.cycle[0] }}
              <el-input-number size="small" v-model="hour.rangeStart" :min="0" :max="23" />
              {{ text.Hours.cycle[1] }}
              <el-input-number size="small" v-model="hour.rangeEnd" :min="0" :max="23" />
              {{ text.Hours.cycle[2] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> {{ text.Day.name }}</span>
        </template>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="day.cronEvery" label="1">{{ text.Day.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="2">{{ text.Day.intervalWeek[0] }}
              <el-input-number size="small" v-model="week.incrementIncrement" :min="1" :max="7" />
              {{ text.Day.intervalWeek[1] }}
              <el-select size="small" v-model="week.incrementStart">
                <el-option v-for="(val,$index) in 7" :key="$index" :label="text.Week[val-1]" :value="val" />
              </el-select>
              {{ text.Day.intervalWeek[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="3">{{ text.Day.intervalDay[0] }}
              <el-input-number size="small" v-model="day.incrementIncrement" :min="1" :max="31" />
              {{ text.Day.intervalDay[1] }}
              <el-input-number size="small" v-model="day.incrementStart" :min="1" :max="31" />
              {{ text.Day.intervalDay[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="day.cronEvery" label="4">{{ text.Day.specificWeek }}
              <el-select size="small" multiple v-model="week.specificSpecific">
                <el-option v-for="(val,$index) in 7" :key="$index" :label="text.Week[val-1]" :value="['SUN','MON','TUE','WED','THU','FRI','SAT'][val-1]" />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="day.cronEvery" label="5">{{ text.Day.specificDay }}
              <el-select size="small" multiple v-model="day.specificSpecific">
                <el-option v-for="(val,$index) in 31" :key="$index" :value="val">{{ val }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="6">{{ text.Day.lastDay }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="7">{{ text.Day.lastWeekday }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="8">{{ text.Day.lastWeek[0] }}
              <el-select size="small" v-model="day.cronLastSpecificDomDay">
                <el-option v-for="(val,$index) in 7" :key="$index" :label="text.Week[val-1]" :value="val" />
              </el-select>
              {{ text.Day.lastWeek[1]||'' }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="9">
              <el-input-number size="small" v-model="day.cronDaysBeforeEomMinus" :min="1" :max="31" />
              {{ text.Day.beforeEndMonth[0] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="10">{{ text.Day.nearestWeekday[0] }}
              <el-input-number size="small" v-model="day.cronDaysNearestWeekday" :min="1" :max="31" />
              {{ text.Day.nearestWeekday[1] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="11">{{ text.Day.someWeekday[0] }}
              <el-input-number size="small" v-model="week.cronNthDayNth" :min="1" :max="5" />
              <el-select size="small" v-model="week.cronNthDayDay">
                <el-option v-for="(val,$index) in 7" :key="$index" :label="text.Week[val-1]" :value="val" />
              </el-select>
              {{ text.Day.someWeekday[1] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> {{ text.Month.name }}</span>
        </template>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="month.cronEvery" label="1">{{ text.Month.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="month.cronEvery" label="2">{{ text.Month.interval[0] }}
              <el-input-number size="small" v-model="month.incrementIncrement" :min="0" :max="12" />
              {{ text.Month.interval[1] }}
              <el-input-number size="small" v-model="month.incrementStart" :min="0" :max="12" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="month.cronEvery" label="3">{{ text.Month.specific }}
              <el-select size="small" multiple v-model="month.specificSpecific">
                <el-option v-for="(val,$index) in 12" :key="$index" :label="val" :value="val" />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="month.cronEvery" label="4">{{ text.Month.cycle[0] }}
              <el-input-number size="small" v-model="month.rangeStart" :min="1" :max="12" />
              {{ text.Month.cycle[1] }}
              <el-input-number size="small" v-model="month.rangeEnd" :min="1" :max="12" />
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> {{ text.Year.name }}</span>
        </template>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="year.cronEvery" label="1">{{ text.Year.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="year.cronEvery" label="2">{{ text.Year.interval[0] }}
              <el-input-number size="small" v-model="year.incrementIncrement" :min="1" :max="99" />
              {{ text.Year.interval[1] }}
              <el-input-number size="small" v-model="year.incrementStart" :min="2020" :max="2120" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="year.cronEvery" label="3">{{ text.Year.specific }}
              <el-select size="small" filterable multiple v-model="year.specificSpecific">
                <el-option v-for="(val,$index) in 30" :key="$index" :label="2020+val" :value="2020+val" />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="year.cronEvery" label="4">{{ text.Year.cycle[0] }}
              <el-input-number size="small" v-model="year.rangeStart" :min="2021" :max="2118" />
              {{ text.Year.cycle[1] }}
              <el-input-number size="small" v-model="year.rangeEnd" :min="2021" :max="2118" />
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="bottom">
      <el-row>
        <el-col :span="16" align="start">
          <span class="value">{{ cron }}</span>
        </el-col>
        <el-col :span="8" align="end">
          <el-button @click="close">{{ text.Close }}</el-button>
          <el-button type="primary" @click="change">{{ text.Save }}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Language from '../language';

export default {
  name: 'CronEditor',
  props: {
    data:{
      type: Array,
      default:()=>[]
    },
    i18n:{
      type: String,
      default:''
    }
  },
  data() {
    return {
      second: {
        cronEvery: '',
        incrementStart: '0',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
      },
      minute: {
        cronEvery: '',
        incrementStart: '0',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
      },
      hour: {
        cronEvery: '',
        incrementStart: '0',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
      },
      day: {
        cronEvery: '',
        incrementStart: '1',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
        cronLastSpecificDomDay: 1,
        cronDaysBeforeEomMinus: '',
        cronDaysNearestWeekday: '',
      },
      week: {
        cronEvery: '',
        incrementStart: '1',
        incrementIncrement: '1',
        specificSpecific: [],
        cronNthDayDay: 1,
        cronNthDayNth: '1',
      },
      month: {
        cronEvery: '',
        incrementStart: '1',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
      },
      year: {
        cronEvery: '',
        incrementStart: '2020',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
      },
      output: {
        second: '',
        minute: '',
        hour: '',
        day: '',
        month: '',
        Week: '',
        year: '',
      }
    }
  },
  computed: {
    text() {
      return Language[this.i18n || 'cn']
    },
    secondsText() {
      let seconds = '';
      let cronEvery = this.second.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
          seconds = '*';
          break;
        case '2':
          seconds = this.second.incrementStart + '/' + this.second.incrementIncrement;
          break;
        case '3':
          this.second.specificSpecific.map(val => {
            seconds += val + ','
          });
          seconds = seconds.slice(0, -1);
          break;
        case '4':
          seconds = this.second.rangeStart + '-' + this.second.rangeEnd;
          break;
      }
      return seconds;
    },
    minutesText() {
      let minutes = '';
      let cronEvery = this.minute.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
          minutes = '*';
          break;
        case '2':
          minutes = this.minute.incrementStart + '/' + this.minute.incrementIncrement;
          break;
        case '3':
          this.minute.specificSpecific.map(val => {
            minutes += val + ','
          });
          minutes = minutes.slice(0, -1);
          break;
        case '4':
          minutes = this.minute.rangeStart + '-' + this.minute.rangeEnd;
          break;
      }
      return minutes;
    },
    hoursText() {
      let hours = '';
      let cronEvery = this.hour.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
          hours = '*';
          break;
        case '2':
          hours = this.hour.incrementStart + '/' + this.hour.incrementIncrement;
          break;
        case '3':
          this.hour.specificSpecific.map(val => {
            hours += val + ','
          });
          hours = hours.slice(0, -1);
          break;
        case '4':
          hours = this.hour.rangeStart + '-' + this.hour.rangeEnd;
          break;
      }
      return hours;
    },
    daysText() {
      let days = '';
      let cronEvery = this.day.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
          break;
        case '2':
        case '4':
        case '11':
          days = '?';
          break;
        case '3':
          days = this.day.incrementStart + '/' + this.day.incrementIncrement;
          break;
        case '5':
          this.day.specificSpecific.map(val => {
            days += val + ','
          });
          days = days.slice(0, -1);
          break;
        case '6':
          days = "L";
          break;
        case '7':
          days = "LW";
          break;
        case '8':
          days = this.day.cronLastSpecificDomDay + 'L';
          break;
        case '9':
          days = 'L-' + this.day.cronDaysBeforeEomMinus;
          break;
        case '10':
          days = this.day.cronDaysNearestWeekday + "W";
          break
      }
      return days;
    },
    weeksText() {
      let weeks = '';
      let cronEvery = this.day.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
        case '3':
        case '5':
          weeks = '?';
          break;
        case '2':
          weeks = this.week.incrementStart + '/' + this.week.incrementIncrement;
          break;
        case '4':
          this.week.specificSpecific.map(val => {
            weeks += val + ','
          });
          weeks = weeks.slice(0, -1);
          break;
        case '6':
        case '7':
        case '8':
        case '9':
        case '10':
          weeks = "?";
          break;
        case '11':
          weeks = this.week.cronNthDayDay + "#" + this.week.cronNthDayNth;
          break;
      }
      return weeks;
    },
    monthsText() {
      let months = '';
      let cronEvery = this.month.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
          months = '*';
          break;
        case '2':
          months = this.month.incrementStart + '/' + this.month.incrementIncrement;
          break;
        case '3':
          this.month.specificSpecific.map(val => {
            months += val + ','
          });
          months = months.slice(0, -1);
          break;
        case '4':
          months = this.month.rangeStart + '-' + this.month.rangeEnd;
          break;
      }
      return months;
    },
    yearsText() {
      let years = '';
      let cronEvery = this.year.cronEvery;
      switch (cronEvery.toString()) {
        case '1':
          years = '*';
          break;
        case '2':
          years = this.year.incrementStart + '/' + this.year.incrementIncrement;
          break;
        case '3':
          this.year.specificSpecific.map(val => {
            years += val + ','
          });
          years = years.slice(0, -1);
          break;
        case '4':
          years = this.year.rangeStart + '-' + this.year.rangeEnd;
          break;
      }
      return years;
    },
    cron() {
      return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} ${this.yearsText || '*'}`
    },
  },
  watch: {
    data() {
      // console.log(this.$data);
      // console.log(this.data);
      this.rest(this.$data);
    }
  },
  mounted() {
  },
  methods: {
    getValue() {
      return this.cron;
    },
    change() {
      console.log('this.cron',this.cron)
      this.$emit('cron-change', this.cron);
      this.close();
    },
    close() {
      this.$emit('close')
    },
    rest(data) {
      for (let i in data) {
        if (data[i] instanceof Object) {
          this.rest(data[i])
        } else {
          switch (typeof data[i]) {
            case 'object': data[i] = []; break;
            case 'string': data[i] = ''; break;
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#changeContab {
  // width: 400px;
  .language {
    position: absolute;
    right: 25px;
    z-index: 1;
  }
  .el-tabs {
    box-shadow: none;
  }
  .tabBody {
    .el-row {
      margin: 10px 0;
      .long {
        .el-select {
          width: 350px;
        }
      }
      .el-input-number {
        width: 110px;
      }
    }
  }
  .bottom {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    position: relative;
    .value {
      font-size: 20px;
      vertical-align: middle;
      color: #1ab394;
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>